import {
  PageContainer
} from '@ant-design/pro-components';
import '@umijs/max';
import ReactECharts from 'echarts-for-react';
import { useEffect, useState } from "react";
import { listTopInvokeApiUsingGET } from "@/services/api/analyzeController";

/**
 * 接口统计
 * @constructor
 */
const ApiAnalysis: React.FC = () => {
  const [data, setData] = useState<API.UserApiInfoVO[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true)
    listTopInvokeApiUsingGET().then(res => {
      if (res.data) {
        setData(res.data)
      }
      setLoading(false)
    })
  }, [])

  //映射  {value:value ,name:name}
  const chartData = data.map(item => {
    return {
      value: item.totalNum,
      name: item.name
    }
  })
  const option = {
    title: {
      text: 'API调用次数TOP10',
      subtext: '排名前10',
      left: 'center',
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: chartData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  const containerStyle = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 'calc(100vh - 200px)' // 可根据需要调整高度
  };

  return (
    <PageContainer>
      <div style={containerStyle}>
        <ReactECharts
          style={{ width: '70vw', height: '70vh' }} // 调整饼图的大小
          loadingOption={{ showLoading: loading }}
          option={option}
        />
      </div>
    </PageContainer>
  );
};

export default ApiAnalysis;
